<template>
    <el-dialog title="添加站点" :visible="visible" :before-close="onCancel">
        <el-form :model="form" label-width="80px" :rules="rules" ref="addSiteForm">
            <el-form-item label="域名" prop="domain">
                <el-input v-model="form.domain" @change="handleDomainChange"></el-input>
            </el-form-item>
            <el-form-item label="根目录" prop="webroot">
                <el-input v-model="form.webroot"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="note">
                <el-input v-model="form.note"></el-input>
            </el-form-item>
            <el-form-item label="PHP版本">
                <el-select v-model="form.php" placeholder="请选择">
                    <el-option key="0" label="纯静态" value="">
                    </el-option>
                    <el-option v-for="item in phpVersion" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onCancel">取消</el-button>
            <el-button type="primary" @click="onSumit">确定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { addSite } from "@/api/site"
import webroot from "@/config"

export default {
    name: 'add-site',
    props: ['visible'],
    data() {
        return {
            syncVisible: false,
            rules: {
                domain: [
                    { required: true, message: "请输入域名", trigger: "blur" }
                ],
                webroot: [{
                    required: true,
                    message: "请输入web根目录",
                    trigger: "blur"
                }],
                note: []
            },
            phpVersion: [
                { label: 'PHP-73', value: '7.3' },
            ],
            form: {
                domain: '',
                note: '',
                webroot: '',
                php: ''
            }
        }
    },
    methods: {
        onSumit() {
            this.$refs.addSiteForm.validate(valid => {
                if (valid) {
                    addSite(this.form).then(res => {
                        if (res.code == 1) {
                            this.$message.success('添加成功')
                            this.onCancel()
                            this.$emit("loadData")
                        }
                    })
                } else {
                    return false;
                }
            })
        },
        onCancel() {
            this.$emit('onClose')
            this.$refs.addSiteForm.resetFields();
        },
        handleDomainChange() {
            this.form.webroot = webroot + this.form.domain
        }
    }
}
</script>